import { styled } from '@mui/material/styles'
import { TProductCart } from '../../store/reducers/slices/cartSlice'
import { Stack, Typography } from '@mui/material'
import AmountSelector from './amountSelector'
import DeleteFromCartButton from './deleteFromCartButton'

export type TCardProps = TProductCart & {
	purchaseAmount: number
}

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
	gap: '12px',
	width: '620px',
	height: '62px',
}))

const CartItem = ({
	_id,
	name,
	pictures,
	stock,
	price,
	discount,
}: TCardProps) => {
	const discountPrice = discount

	return (
		<StyledContainer>
			<img width='62px' height='62px' src={pictures} alt='Product' />
			<Stack direction={'column'} justifyContent={'space-between'}>
				<Typography width={244} variant='body1'>
					{name}
				</Typography>
				<Typography width={244} variant='body2'>
					{stock}
				</Typography>
			</Stack>
			<Stack direction={'column'} justifyContent={'space-between'}>
				<Typography width={92}>{`${price} ₽`}</Typography>
				<Typography width={92} color={'#F44336'} fontSize={'20px'}>
					{`${discountPrice} ₽`}
				</Typography>
			</Stack>

			<AmountSelector _id={_id} />
			<DeleteFromCartButton _id={_id} />
		</StyledContainer>
	)
}

export default CartItem
